---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Create layers using HTML5 canvas
description: Draw a custom layer using L.tileLayer.canvas to create a canvas element.
tags:
  - layers
---

<div id='map'></div>
<script>
var map = L.mapbox.map('map')
    .setView([42.3619, -71.0606], 15)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

// Since it's using the HTML5 Canvas API, it is not
// compatible with IE8 and below. See full documentation:
// https://www.mapbox.com/mapbox.js/api/{{site.mapboxjs}}/l-tilelayer-canvas/
var canvasTiles = L.tileLayer.canvas();

canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
	var ctx = canvas.getContext('2d');
      ctx.fillText(tilePoint.toString(), 50, 50);
      ctx.globalAlpha = 0.2;
      ctx.fillStyle = '#000';
      ctx.fillRect(10, 10, 246, 246);
};

canvasTiles.addTo(map);
</script>
